{include file="common/header"}
<script>
        $('#example-navbar-collapse>ul>li').removeClass('active')
        $($('#example-navbar-collapse>ul>li')[2]).addClass('active')
    </script>
<style>
    #main-block {
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
    }

    .hidden {
        display: none
    }
    .top{
        margin-top: 50px;
    }
    .text{
        text-align: center;
    }
    .text >tbody>tr>td{
        line-height: 35px;
    }
    .text > thead{
        font-weight: bold;
    }
</style>
<div id="main-block">
    <div class="container">
        <div class="container col-md-3" id="left-menu">
            <div id="sidebar" class="span3">
                <div class="sidebar-nav well">
                    <ul class="nav nav-list">
                        <li v-for="(li,i) in items" v-bind:class="{active:li.isSelect}">
                            <a href="javascript:;" @click.self.prevent="onSelect(i)">
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;"> {{ li.name }}</font>
                                </font>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="notice" class="col-md-9">
            <center>
                <h2>{{type}}</h2>
            </center>
            <table class="table table-striped table-bordered table-hover text" v-show="isSelect">
                <thead>
                    <td>项目名称</td>
                    <td>授予学分</td>
                    <td>发布教师</td>
                    <td>最大成员数</td>
                    <td>开始时间</td>
                    <td>截止时间</td>
                    <td></td>
                </thead>
                <tr v-for="(e,index) in tea_data">
                    <td>{{e.p_name}}</td>
                    <td>{{e.score}}</td>
                    <td>{{e.t_name}}</td>
                    <td>{{e.num}}</td>
                    <td>{{e.time}}</td>
                    <td>{{e.e_time}}</td>
                    <td>
                        <button type="button" class="btn btn-default btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" 
                        v-on:click="onClick(index)">
                            申请
                        </button>
                    </td>
                </tr>
            </table>

            <table class="table table-striped table-bordered table-hover text" v-show="select">
                <center>
                    <h3 v-show="select" class="top">项目申请进度</h3>
                </center>
                <thead>

                    <td>项目名称</td>
                    <td>项目所属</td>
                    <td>学分</td>
                    <td>申请时间</td>
                    <td>状态</td>
                    

                </thead>
                <tr v-for="(e,index) in stu_pro_data">
                    <td>{{e.p_name}}</td>
                    <td>{{e.pc_name}}</td>
                    <td>{{e.score}}</td>
                    <td>{{e.time}}</td>
                    <td>{{status[e.is_access]}}</td>
                    <!-- <td>
                        <button type="button" class="btn btn-default btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            取消申请
                        </button>
                    </td> -->
                </tr>

                <table class="table table-striped table-bordered table-hover text" v-show="select">
                    <center>
                        <h3 v-show="select" class="top">学分申请进度</h3>
                    </center>
                    <thead>

                        <td>申请名称</td>
                        <td>学分类型</td>
                        <td>学分</td>
                        <td>申请时间</td>
                        <td>状态</td>
                        

                    </thead>
                    <tr v-for="(e,index) in stu_sco_data">
                        <td>{{e.name}}</td>
                        <td>{{types[e.type]}}</td>
                        <td>{{e.score}}</td>
                        <td>{{e.time}}</td>
                        <td>{{status[e.is_access]}}</td>
                        <!-- <td>
                            <button type="button" class="btn btn-default btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                取消申请
                            </button>
                        </td> -->
                    </tr>
                </table>
        </div>
    </div>
</div>





<script>
    // $(document).ready(function(){
    //     var a=$.session.get('key');
        
    //             console.log(a)
    // })
    var left_menu = new Vue({
        el: '#left-menu',
        data: {
            items: [{
                name: "教师项目公告",
                isSelect: true
            }, {
                name: "申请进度查询",
                isSelect: false
            }
            ],
            selected: 0
        }, methods: {
            onSelect: function (e) {
                this.items[this.selected].isSelect = false
                this.items[e].isSelect = true
                this.selected = e
                if (notice.type != this.items[e].name) {
                    notice.isSelect = !notice.isSelect
                    notice.select = !notice.select
                }
                notice.type = this.items[e].name
            }
        }

    })



    var notice = new Vue({
        el: '#notice',
        data: {
            type: '教师项目公告',
            tea_data: [],
            stu_pro_data: [],
            stu_sco_data: [],
            status: {
                '-1': '未通过',
                '0': '审核中',
                '1': '通过',
                '2': '项目已结题'
            },
            types: {
                'varture': '德育',
                'wit': '智育',
                'sports': '体育'
            },
            isSelect: true,
            select: false
        },
        mounted: function () {
            this.getData()
        },
        methods: {
            onClick: function (id) {
                sessionStorage.setItem("key", id);
                console.log(id)
                window.location.href="/GQT/public/index/apply/appProject";
            },
            getData: function () {
                var user_name = document.cookie.substring(7);
                $.getJSON('/GQT/public/index/project/get_tea_data', function (data) {
                    for (var i = 0; i < data.length; i++) {
                        notice.tea_data.push(data[i]);
                    }
                    console.log(notice.tea_data)
                })
                $.getJSON('/GQT/public/index/project/get_score_data', { stu_id: user_name }, function (data) {
                    for (var i = 0; i < data.length; i++) {
                        notice.stu_sco_data.push(data[i])
                    }
                })
                $.getJSON('/GQT/public/index/project/get_pro_data', { stu_id: user_name }, function (data) {
                    for (var i = 0; i < data.length; i++) {
                        notice.stu_pro_data.push(data[i])
                    }
                })
            }
        }

    })
</script>

<style>
    .active a {
        color: white;
    }
</style>





{include file="common/footer"}